<template>
<div class="detective-task-edit common-page">
  <div class="side-wrap" style="background: red"></div>
  <div class="main-wrap">
    <el-form label-width="80px" :model="formModel">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="业务警种">
            <el-radio-group v-model="formModel.measure" >
              <el-radio label="刑侦"></el-radio>
              <el-radio label="图侦"></el-radio>
              <el-radio label="技侦"></el-radio>
              <el-radio label="网侦"></el-radio>
              <el-radio label="情报"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务等级">
            <!-- @change="change" -->
            <el-radio-group :fill="(taskUrgency && taskUrgency.color) || '#2E62ED'"  size="mini" v-model="formModel.urgency" >
              <el-radio-button label="绿色"></el-radio-button>
              <el-radio-button label="蓝色"></el-radio-button>
              <el-radio-button label="橙色"></el-radio-button>
              <el-radio-button label="红色"></el-radio-button>
              <el-radio-button label="自定"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="任务类别">
            <el-select placeholder="请选择任务类别" size="mini" v-model="formModel.taskType">
              <el-option label="对案侦查" value="case"></el-option>
              <el-option label="对人侦查" value="person"></el-option>
              <el-option label="对线索侦查" value="info"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型">
            <el-select placeholder="请选择任务类型" size="mini" v-model="formModel.taskClass" >
              <el-option label="视频资料调取" value="_视频资料调取"></el-option>
              <el-option label="涉案类出租车GPS查询" value="_涉案类出租车GPS查询"></el-option>
              <el-option label="车辆卡口信息查询" value="_车辆卡口信息查询"></el-option>
              <el-option label="人像识别查询比对" value="_人像识别查询比对"></el-option>
              <el-option label="人像卡口布控" value="_人像卡口布控"></el-option>
              <el-option label="视频资料快速智能检索" value="_视频资料快速智能检索"></el-option>
              <el-option label="空中视频侦查" value="_空中视频侦查"></el-option>
              <el-option label="控制视频全景图制作" value="_控制视频全景图制作"></el-option>
              <el-option label="安装移动视频监控" value="_安装移动视频监控"></el-option>
              <el-option label="模糊图像处理" value="_模糊图像处理"></el-option>
              <el-option label="手机位置和轨迹查询" value="_手机位置和轨迹查询"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="任务标题">
            <el-input size="mini" v-model="formModel.taskTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-form-item label="任务编号">
            <el-input size="mini" v-model="formModel.taskId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="22">
          <el-form-item label="任务事由">
            <el-input  type="textarea" :rows="4" resize="none" v-model="formModel.taskDesc" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="22">
           <el-form-item label="工作要求">
            <el-input   type="textarea" :rows="4" resize="none" v-model="formModel.taskRule"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="反馈单位">
            <el-select placeholder="请选择反馈单位" size="mini" v-model="formModel.department">
              <el-option label="天元区分局" value="_天元区分局"></el-option>
              <el-option label="越秀区分局" value="_越秀区分局"></el-option>
              <el-option label="天河区分局" value="_天河区分局"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="反馈民警">
            <el-select placeholder="请选择反馈民警" size="mini" v-model="formModel.policeman">
              <el-option label="李笑棠" value="0001"></el-option>
              <el-option label="梁永仁" value="0002"></el-option>
              <el-option label="黄启发" value="0003"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="邮寄地址">
            <el-input size="mini" v-model="formModel.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-form-item label="邮政编码">
            <el-input size="mini" v-model="formModel.zipCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row> 
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="签收日期">
            <el-date-picker type="date" size="mini" placeholder="选择日期" 
              format="yyyy-MM-dd" style="width: 100%;"
              v-model="formModel.receptDate">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-form-item label="反馈日期">
            <el-date-picker type="date" size="mini" placeholder="选择日期"
              style="width: 100%;" format="yyyy-MM-dd"
              v-model="formModel.replyDate">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item label="上传文件">
            <xdh-file-input size="mini" multiple v-model="fileName" @on-change="fileInputChange"></xdh-file-input>
          </el-form-item>
          <ul class="file-list">
            <li v-for="(item, index) in fileList" :key="index">{{item.name}} 
              <a style="cursor:pointer" @click="removeFile(index)">删除</a>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-form>
  </div>
  
</div>
</template>

<style lang="scss" scoped>
// @import "../../../../../src/style/variables/_default.scss";
.detective-task-edit{
  display:flex;
  flex-flow: row nowrap;
  .side-wrap{
    flex: 0 0 20%;
    width: 20%;
  }
  .main-wrap{
    flex: 1;
    padding: 20px;
    // .file-list{
    //   > a{
    //     cursor: pointer;
    //   }
    // }
  }
}

</style>

<script>
import XdhFileInput from '@/widgets/xdh-file-input'
const URGENCY = {
  '绿色': {color: '#1FDB58', value: 'normal', label: '绿色'}, // 常规
  '蓝色': {color: '#2E62ED', value: 'regular', label: '蓝色'}, // 预警
  '橙色': {color: '#FA3B00', value: 'warning', label: '橙色'}, // 戒备
  '红色': {color: '#FC0308', value: 'danger', label: '红色'}, // 一级戒备
  '自定': {color: '#0F0F0F', value: 'custom', label: '自定'} // 自定义
}
const MEASURE = { '刑侦': 1, '图侦': 2, '技侦': 3, '网侦': 4, '情报': 5 }



export default {
  name: '',
  components: {
    XdhFileInput
  },
  props: {
  },
  data() {
    return {
      fileName: '',
      fileList: [],
      formModel: {
        measure: '', // 业务警种（手段）
        urgency: '', // 颜色（紧急度）
        taskType: '', // 任务类别
        taskClass: '', // 任务类型
        taskTitle: '', // 任务标题
        taskId: '', // 任务编号
        taskDesc: '', // 任务事由
        taskRule: '', // 工作要求
        department: '', // 反馈单位
        policeman: '', // 接待民警
        address: '', // 邮寄地址
        zipCode: '', // 邮政编码
        receptDate: '', // 签收日期
        replyDate: '' // 反馈日期
      }
    }
  },
  computed: {
    taskMeasure() {
      return this.formModel.measure ? MEASURE[this.formModel.measure] : null
    },
    taskUrgency() {
      return this.formModel.urgency ? URGENCY[this.formModel.urgency] : null
    }
    
  },
  watch: {
    taskUrgency(val) {
      console.log(val)
    },
    'formModel.urgency': {
      handler: function(val) {
        console.log(val)
      }
    } 
  },
  methods: {
    fileInputChange(files) {
      this.fileList = Array.from(files)
    },
    removeFile(index) {
      if (this.fileList.length === 1) {
        this.fileName = ''
      }
      this.fileList.splice(index, 1)
       
    }
  },
  mounted() {
  }
}
</script>

